<template>
    <div class="red" @click="$emit('click-red',status)">

        <div id="red" v-show="red_show" ref="red" :class="open_class" :style="red_style">

            <!--S红包未开-->
            <template v-if="status === 'open' || status === 'opening'">
            <!--头像--><div class="header" :style="{'background-image': 'url('+detail.header+')'}"></div>

            <!--装饰云朵--><div class="cloud"></div>

            <!--昵称--><div class="nickname">{{detail.nickname}}的红包</div>

            <!--红包标题--><div class="title">{{detail.title}}</div>

            <!--错误信息--><div class="error" v-if="detail.error">{{detail.error.err_msg}}</div>

            <!--开红包按钮--><div class="open-btn" v-if="!detail.error" @click.stop="clickOpenButton"></div>
            </template>
            <!--E红包未开-->

            <!--S已开-->
            <template v-if="status === 'opened'">
            <!--昵称--><div class="nickname" :style="{'background-image':'url('+detail.header+')'}">{{detail.nickname}}的红包</div>
            <!--金额--><div class="money">{{detail.gain_money}}元</div>
            <!--S关闭红包按钮-->
            <div class="close" @click="closeRed" v-if="redType !== 'normal'"><i class="cubeic-close"></i></div>
            <!--E关闭红包按钮-->
            </template>
            <!--E已开-->

        </div>

        <!--S开包倒计时-->
        <count v-if="count_show" ref="count" :now-count="now_count" :total-count="total_count"></count>
        <!--E开包倒计时-->

        <!--S红包答题弹窗-->
        <dialog-qa
                :show="dialog_qa.show"
                :red-id="redId"
                :check-type="parseInt(detail.open_check)"
                @correct="correct"
                @reset="qaResetRed"
        ></dialog-qa>
        <!--E红包答题弹窗-->
    </div>
</template>

<script>
    //开默认红包时的定时器
    let openNormalRedTimer = null;
    //开图片红包时的定时器
    let openPicRedTimer = null;
    import store from "../../../../store/index";
    import {mapState} from "vuex"
    import count from "../count/count";
    import dialogQa from "../dialog-qa/DialogQa";
    import Tool from "../../../../util/Tool.js";
    export default {
        name: "Red",
        data(){
            return {
                uid:0, // 当前用户uid
                status:"open",  //open=未开或者开启中 opening=开启中 opened 红包已开启或者其他状态
                red_show:true,  //是否显示红包
                detail:{},   //红包数据
                red_style:{transform:'translate(-50%,-50%) scale(1)'},  //id red css
                count_show:false,  //开包倒计数显示状态
                now_count:0,   //当前的计时秒数
                total_count:10, //总的图片显示计时数量
                dialog_qa:{   //答题红包
                    show:false
                }
            }
        },
        props:{
            //红包id
            redId:{
                type:String
            },
            //红包类型
            redType:{
                type:String,
                default:"normal"
            },
            //当前的计时秒数
            nowCount:{
                type:Number,
                default: 0
            },
            //总的图片显示计时数量
            totalCount:{
                type:Number,
                default:10
            },
            //视频红包是否播放完成
            videoComplete:{
                type:Boolean,
                default:false
            }
        },
        watch:{
            //视频播放完成
            videoComplete(value){
                if(value && !this.detail.status.status){
                    if(parseInt(this.detail.open_check)){
                        this.dialog_qa.show = true;
                    }else{
                        this.remoteOpenRed()
                            .then(()=>{
                                this.openedAfter();
                            });
                    }
                }
            },
            //视频红包当前时间
            nowCount(value){
                this.now_count = value;
                //图片红包重置
                if(this.redType === 'pic' && value === 0 && this.status === "opening"){
                    this.status = "open";
                    clearInterval(openPicRedTimer);
                    this.openedAfter();
                }
            },
            //视频红包总时长
            totalCount(value){
                this.total_count = value;
            },
            "$route"(){
                clearTimeout(openNormalRedTimer);
                clearInterval(openPicRedTimer);
                if(this.redType === "pic"){
                    this.now_count = -1;
                    this.status = "open";
                    this.openedAfter();
                }
            }
        },
        components:{
            count,
            "dialog-qa":dialogQa
        },
        computed:{
            //红包 #red class
            open_class(){
                let _class = "open";
                if(this.status === 'open'){
                    _class = "open";
                }else if(this.status === 'opening'){
                    _class = "open opening";
                }else{
                    _class = "opened";
                }
                return _class;
            },
            ...mapState({
                'share': 'share',
                'phone': 'phone',
                'setting': 'setting'
            })
        },
        created() {
            Tool.login()
                .then((res)=>{
                    this.uid = res
                })
            this.getDetail();
        },
        beforeDestroy(){
            clearTimeout(openNormalRedTimer);
            clearInterval(openPicRedTimer);
        },
        methods:{
            //Run
            /**
             * 获取红包内容
             */
            getDetail(){
                this.$url('redDetail/openRedDetail',{
                    red_type:this.redType,
                    red_id:this.redId
                })
                    .then((res)=>{
                        if(res.data.status === "success"){
                            let data = res.data.data;
                            this.detail = res.data.data;
                            if(data.status.status === 5){
                                this.detail.gain_money = data.status.money;
                                this.status = "opened";
                            }
                            this.$emit("loaded",this.detail);
                        }
                    });
            },

            //Handel
            /**
             *点击开启红包按钮
             */
            clickOpenButton() {
                if (!this.openCheck()) return;
                this.status = "opening";
                if(this.detail.red_type === 'normal'){
                    this.openNormal();
                }else if(this.detail.red_type === 'pic'){
                    this.openBefore();
                    this.openPic();
                }else if(this.detail.red_type === 'video'){
                    this.openBefore();
                }
            },
            /**
             * 开默认红包
             */
            openNormal(){
                clearTimeout(openNormalRedTimer);
                openNormalRedTimer = setTimeout(() => {
                    this.remoteOpenRed();
                }, 1000);
            },
            /**
             *开启其他红包之前执行代码
             */
            openBefore(){
                this.red_style = {transform: 'translate(-100%,-120%) scale(.1)'};
                setTimeout(()=>{
                    this.red_show = false;
                    this.count_show = true;
                    this.$emit("open-video");
                },300);
            },
            /**
             * 红包开启之后
             */
            openedAfter(){
                this.red_show = true;
                this.count_show = false;
                this.red_style = {transform: 'translate(-50%,-50%) scale(1)'};
            },
            /**
             *开启图片红包
             */
            openPic(){
                clearInterval(openPicRedTimer);
                openPicRedTimer = setInterval(()=>{
                    this.now_count ++;
                    if(this.now_count >= this.total_count){
                        clearInterval(openPicRedTimer);
                        if(parseInt(this.detail.open_check)){
                            this.dialog_qa.show = true;
                        }else{
                            this.remoteOpenRed()
                            .then(()=>{
                                this.openedAfter();
                            });
                        }
                    }
                },1000);
            },
            /**
             * 开红包验证
             */
            openCheck(){
                //是否私有红包
                let own_uid = parseInt(this.detail.uid);
                if(this.detail.share === '0' && (own_uid !== parseInt(this.uid))){
                    if(this.share.uid !== own_uid){
                        this.$createToast({
                            time: 1500,
                            type:'error',
                            txt: '您不是'+this.detail.nickname+'的朋友哦'
                        }).show();
                        return false;
                    }
                }
                //用户所在区域是否与红包一致
                if(this.detail.area_type !== '0'){
                    let area_type = parseInt(this.detail.area_type);
                    if(this.detail.area[area_type-1] !== store.state.area[area_type-1]){
                        this.$createToast({
                            time: 1500,
                            type:'error',
                            txt: '仅限'+this.detail.area[area_type-1]+'的用户可以开红包哦~'
                        }).show();
                        return false;
                    }
                }
                // 是否强制用户认证手机号
                if(this.setting["open_phone"] === "1" && this.setting["coerce_phone"] === "1") {
                    if(this.phone === ''){
                        this.$router.push({name:"index-phone"});
                        return false;
                    }
                }
                return true;
            },
            /**
             * 远程开启红包
             */
            remoteOpenRed(){
                return new Promise((success)=>{
                    this.$url('redOpen/index',{
                        red_id:this.redId
                    })
                        .then((res)=>{
                            if(res.data.status === "success"){
                                this.status = "opened";
                                this.detail.gain_money = res.data.data.money;
                            }else{
                                this.status = "open";
                                this.detail.error = res.data;
                            }
                            success();
                        });
                });
            },
            /**
             * 关闭隐藏红包
             */
            closeRed(){
                this.$emit("close");
            },
            /**
             * 问答红包答题正确
             */
            correct(){
                this.remoteOpenRed()
                    .then(()=>{
                        this.openedAfter();
                    });
            },
            /**
             * 问答红包重置
             */
            qaResetRed(){
                this.status = "open";
                this.now_count = -1;
                this.dialog_qa.show = false;
                this.openedAfter();
                this.$emit("qa-reset");
            }
        }
    }
</script>

<style scoped lang="less" src="./red.less"></style>
